Skip to content

refactor(perps): use MMDS HeaderStandard#29703

Merged
brianacnguyen merged 4 commits into
mainfrom
refactor/headerstandard-titles-perps
May 7, 2026
Merged

refactor(perps): use MMDS HeaderStandard#29703
brianacnguyen merged 4 commits into
mainfrom
refactor/headerstandard-titles-perps

Conversation

@brianacnguyen
Copy link
Copy Markdown
Contributor

@brianacnguyen brianacnguyen commented May 5, 2026 •
edited by cursor Bot
Loading

Description

This PR replaces the temporary HeaderCompactStandard component with HeaderStandard from @metamask/design-system-react-native across Perps surfaces.

Reason: Standardize Perps headers on the MetaMask design system and reduce dependence on component-library/components-temp for common header patterns.

What changed: HeaderStandard is now used for the Perps markets list, withdrawal flow, transaction detail screens (funding, order, position—including the “not found” states), and the default header inside PerpsBottomSheetTooltip when no custom header is supplied. Existing props such as includesTopInset, onBack, onClose, title, backButtonProps, and testID are preserved so behavior should match the previous implementation.

Tests: PerpsMarketListHeader.test.tsx was updated to spread jest.requireActual('@metamask/design-system-react-native') into the design-system mock and to remove the dedicated HeaderCompactStandard mock, so tests exercise the real HeaderStandard behavior from the design system package.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-700

Manual testing steps

Feature: Perps headers use design system HeaderStandard

  Scenario: Markets list header
    Given the user opens Perps and navigates to the markets list
    When they view the header and use back or any trailing actions (e.g. watchlist) as before
    Then layout and navigation match prior behavior

  Scenario: Transaction detail screens
    Given the user opens a Perps funding, order, or position transaction from history
    When they view the header title and tap back
    Then they return to the previous screen and titles match expectations

  Scenario: Missing transaction
    Given a transaction id resolves to no data
    When the user lands on the not-found state
    Then a minimal header with back is shown and back navigates away

  Scenario: Withdraw screen
    Given the user opens Perps withdraw
    When they view the withdrawal title and use the back control
    Then behavior matches the previous screen

  Scenario: Bottom sheet tooltip
    Given a Perps tooltip bottom sheet that uses the default (non-custom) header
    When the user views the title and closes the sheet
    Then the sheet dismisses as before

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Low risk refactor that swaps a temporary header component for the design-system HeaderStandard; main risk is minor UI/layout or testID regressions across Perps screens.

Overview
Standardizes Perps UI headers by replacing the temporary HeaderCompactStandard with MMDS HeaderStandard across the markets list, withdraw flow, transaction detail screens (including “not found” states), the default header in PerpsBottomSheetTooltip, and the shared ListHeaderWithSearch.

Updates the PerpsMarketListHeader test setup to rely on the real design-system exports (spreading jest.requireActual('@metamask/design-system-react-native')) and removes the dedicated HeaderCompactStandard mock so tests exercise HeaderStandard behavior.

Reviewed by Cursor Bugbot for commit 5e55753. Bugbot is set up for automated code reviews on this repo. Configure here.

@brianacnguyen @cursoragent
refactor(perps): use MMDS HeaderStandard
ed03b88 
Co-authored-by: Cursor <cursoragent@cursor.com>
@brianacnguyen brianacnguyen self-assigned this May 5, 2026
@brianacnguyen brianacnguyen requested a review from a team as a code owner May 5, 2026 05:28
@brianacnguyen brianacnguyen added No QA Needed Apply this label when your PR does not need any QA effort. team-design-system All issues relating to design system in Mobile no changelog required No changelog entry is required for this change labels May 5, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 5, 2026

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions github-actions Bot added the size-S label May 5, 2026
cursor[bot]
cursor Bot reviewed May 5, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit ed03b88. Configure here.

Comment thread app/components/UI/Perps/components/PerpsMarketListHeader/PerpsMarketListHeader.test.tsx
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
  • Selected Performance tags: @PerformancePreps
  • Risk Level: medium
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The PR replaces HeaderCompactStandard (a temporary component) with HeaderStandard from @metamask/design-system-react-native across multiple Perps-specific views and the shared ListHeaderWithSearch component.

Directly affected components:

  • PerpsMarketListView: Header component swap
  • PerpsWithdrawView: Header component swap
  • PerpsFundingTransactionView, PerpsOrderTransactionView, PerpsPositionTransactionView: Header component swap in transaction detail views
  • PerpsBottomSheetTooltip: Header component swap in tooltip bottom sheet
  • ListHeaderWithSearch (shared): Header component swap - used by PerpsMarketListHeader and SitesFullView

Tag selection rationale:

  1. SmokePerps: Directly required - multiple Perps views have their header component changed. The market list, withdraw flow, and transaction detail views all use the new HeaderStandard. Navigation (back button) and title rendering need validation.
  2. SmokeWalletPlatform: Required per SmokePerps tag description ("also select SmokeWalletPlatform - Trending section"). Additionally, ListHeaderWithSearch is used by SitesFullView which is part of the Trending/Sites section tested under SmokeWalletPlatform.
  3. SmokeConfirmations: Required per SmokePerps tag description ("also select SmokeConfirmations - Add Funds deposits are on-chain transactions").

Not selected:

  • Other tags (SmokeSwap, SmokeAccounts, etc.) are not affected - changes are isolated to Perps UI components and the shared ListHeaderWithSearch.
  • The HeaderCompactStandard → HeaderStandard migration is a UI-only change with no logic changes, keeping risk at medium level.
  • The test file change (PerpsMarketListHeader.test.tsx) removes the now-unnecessary mock for HeaderCompactStandard and uses the actual design system component.

Performance Test Selection:
The Perps views (market list, withdraw, transaction details) have their header component replaced with HeaderStandard. While this is a UI component swap, the PerpsMarketListView is a list view where header rendering is part of the overall perps market loading performance. The @PerformancePreps tag covers perps market loading, position management, and add funds flow - all of which use the changed header components. Running this performance test validates that the component swap doesn't introduce any rendering regressions.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 6, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
17.6% Duplication on New Code

See analysis details on SonarQube Cloud

@brianacnguyen brianacnguyen added this pull request to the merge queue May 7, 2026
Merged via the queue into main with commit d63cea6 May 7, 2026
100 checks passed
@brianacnguyen brianacnguyen deleted the refactor/headerstandard-titles-perps branch May 7, 2026 17:39
@github-actions github-actions Bot locked and limited conversation to collaborators May 7, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 7, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@gambinish gambinish gambinish approved these changes

Assignees

@brianacnguyen brianacnguyen

Labels

no changelog required No changelog entry is required for this change No QA Needed Apply this label when your PR does not need any QA effort. release-7.77.0 Issue or pull request that will be included in release 7.77.0 size-S team-design-system All issues relating to design system in Mobile

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@brianacnguyen @gambinish